<template>
	<div class="container">
		<div style="position:absolute; right: 20px; top: 100px;">
			<a-button @click="printElement('yanshoulog-info-page')">打印/导出PDF</a-button>
			<a-button style="margin-left: 10px;" @click="closeTab(backRoute ? '/yanshou/standingBook' : '/yanshou/log')">
				<close-outlined />关闭
			</a-button>
		</div>
		<div id="yanshoulog-info-page">
			<a-descriptions bordered size="middle">
				<template #title>
					验收记录<span v-if="formState.is_weighbridge === 1" style="color: red">(地磅)</span>
				</template>
				<template #extra>
					<div><b>验收单编号：</b> {{ route.query.code || formState.yanshouLog?.code }}</div>
					<div><b>发货单编号：</b> {{ formState.code }}</div>
				</template>
				<!--        <a-descriptions-item label="验收单信息" :span="3"></a-descriptions-item>-->
				<a-descriptions-item label="项目名称">{{ project.name??'' }}</a-descriptions-item>
				<a-descriptions-item label="供应商名称" :span="2">{{ supplier.company_name??'' }} ( 验收综合得分：{{ formState.appraise_daily_avg_score }} )</a-descriptions-item>
				<a-descriptions-item label="接收人/电话">{{ formState.receiver }} / {{ formState.receiver_tel }}</a-descriptions-item>
				<a-descriptions-item label="收货地址" :span="2">{{ formState.deliver_address }}</a-descriptions-item>
			</a-descriptions>
			<a-descriptions bordered size="middle">
				<a-descriptions-item label="选择验收类型" :span="formState.ys_des? 1: 2">{{ yslist.find((d) => d.value === formState.ys_type)?.label }}</a-descriptions-item>
				<a-descriptions-item v-if="formState.ys_des" label="验收描述" :span="2">{{ formState.ys_des }}</a-descriptions-item>
				<a-descriptions-item label="验收人">
					<template v-if="formState.ys_settings?.length">
						<span v-for="(item, index) in formState.ys_settings" :key="index">
							<template v-if="item.ys_status === 2">
								<template v-if="item.opr?.manually_signed_file_path">
									<a-image :width="60" :src="item.opr?.manually_signed_file_path" />
								</template>
								<template v-else>
									<span style="padding: 0 5px;">{{ item.opr?.fullname }}</span>
								</template>
							</template>
						</span>
					</template>
					<template v-else>
						<template v-if="formState.yanshouLog?.opr?.manually_signed_file_path">
							<a-image :width="60" :src="formState.yanshouLog.opr?.manually_signed_file_path" />
						</template>
						<template v-else>
							{{ formState.yanshouLog?.opr?.fullname }}
						</template>
					</template>
				</a-descriptions-item>
			</a-descriptions>
			<br />
			<a-row :gutter="20">
				<a-col :span="24">
					<a-table :pagination="false" :data-source="formState.materials" :columns="purchaseColumns" :row-key="(record) => record.key">
						<template #bodyCell="{ column,index, record }">
							<template v-if="column.dataIndex === 'id'">{{ index+1 }}</template>
							<template v-else-if="column.dataIndex === 'use_time'">
								<a-form-item :name="['materials', index, 'use_time']" :rules="{required:true, message:'请输入使用时长'}">
									<a-input v-model:value="formState.materials[index].use_time" disabled placeholder="请输入使用时长" />
								</a-form-item>
							</template>
							<template v-else-if="column.dataIndex === 'art_indexes'">
								<span v-for="(item, ii) in record.art_indexes" :key="ii" class="mr-5">
									{{ artIndexesGongHaos.find(i => i.value === item.gonghao_id)?.label }};
								</span>
							</template>
							<template v-else-if="column.dataIndex === 'time_unit'">
								<a-form-item :name="['materials', index, 'time_unit']" :rules="{required:true, message:'请选择时长计量单位'}">
									<a-select v-model:value="formState.materials[index].time_unit" :show-search="true" placeholder="请选择时长计量单位" :options="timeunitOptions" :field-names="{value:'name'}" disabled style="width:100%"></a-select>
								</a-form-item>
							</template>
						</template>
					</a-table>
				</a-col>
			</a-row>
			<div style="text-align: right;padding-top: 5px;"><b>验收时间：</b> {{ formState.yanshouLog?.create_time }}</div>
			<div>
				<a-row v-if="realFileList?.length" :gutter="24">
					<a-col :span="24" class="py-4 text-right">
						<a-form-item label="发货附件" name="real_pic_path">
							<template v-for="item in realFileList" :key="item.url">
								<a target="_blank" :href="item.url">{{ item.name }}</a><br />
							</template>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row v-if="realPicList?.length" :gutter="24">
					<a-col :span="24" class="py-4 text-right">
						<a-form-item label="发货图片" name="real_pic_path"></a-form-item>
					</a-col>
					<a-col v-for="item in realPicList" :key="item.url" :span="4">
						<div class="gallery-image">
							<a-image :width="160" :height="160" :src="item.url" />
						</div>
						<p>{{ item.name }}</p>
					</a-col>
				</a-row>
				<a-row v-if="formState.pic_path?.length && !approvedHistory.length" :gutter="24">
					<a-col :span="24" class="py-4 text-right">
						<a-form-item label="验收图片" name="pic_path"></a-form-item>
					</a-col>
					<a-col v-for="item in formState.pic_path" :key="item.url" :span="4">
						<div class="gallery-image">
							<a-image :width="160" :height="160" :src="item.url" />
						</div>
						<p>{{ item.name }}</p>
					</a-col>
				</a-row>
				<a-row v-if="formState.video_path?.length && !approvedHistory.length" :gutter="24">
					<a-col :span="24" class="py-4 text-right">
						<a-form-item label="验收视频" name="video_path"></a-form-item>
					</a-col>
					<a-col v-for="item in formState.video_path" :key="item.url" :span="4">
						<div class="gallery-image">
							<video controls :width="160" :height="160">
								<source :src="item.url" type="video/mp4" />
							</video>
						</div>
						<p>{{ item.name }}</p>
					</a-col>
				</a-row>
				<a-row v-if="approvedHistory.length" :gutter="24">
					<a-col :span="24" class="py-4 text-right">
						<a-form-item label="验收图片" name="pic_path"></a-form-item>
					</a-col>
					<template v-for="item in approvedHistory" :key="item.id">
						<template v-if="item.pic_path && item.pic_path !== '[]'">
							<a-col v-for="i in JSON.parse(item.pic_path)" :key="i.url" :span="4">
								<div class="gallery-image">
									<a-image :width="160" :height="160" :src="i.url" />
								</div>
								<p>{{ i.name }}</p>
							</a-col>
						</template>
					</template>
				</a-row>
				<a-row v-if="approvedHistory.length" :gutter="24">
					<a-col :span="24" class="py-4 text-right">
						<a-form-item label="验收视频" name="pic_path"></a-form-item>
					</a-col>
					<template v-for="item in approvedHistory" :key="item.id">
						<template v-if="item.video_path && item.video_path !== '[]'">
							<a-col v-for="i in JSON.parse(item.video_path)" :key="i.url" :span="4">
								<video controls :width="160" :height="160">
									<source :src="i.url" type="video/mp4" />
								</video>
							</a-col>
						</template>
					</template>
				</a-row>
				<a-tabs v-model:activeKey="activeTab">
					<a-tab-pane key="ys_history" tab="验收历史">
						<a-descriptions>
							<template v-for="item in approvedHistory" :key="item.id">
								<a-descriptions-item label="验收时间">{{ item.update_time }}</a-descriptions-item>
								<a-descriptions-item label="验收人">
									<template v-if="item.opr?.manually_signed_file_path">
										<a-image :width="60" :src="item.opr?.manually_signed_file_path" />
									</template>
									<template v-else>
										<span style="padding: 0 5px;">{{ item.opr?.fullname }}</span>
									</template>
									<span v-if="item.opr.is_consignor">({{ item.opr?.parent_user?.company_name }})</span>
								</a-descriptions-item>
								<a-descriptions-item label="验收描述">{{ item.ys_des }}</a-descriptions-item>
							</template>
						</a-descriptions>
					</a-tab-pane>
					<a-tab-pane key="appraise" tab="验收评价">
						<div v-if="hasAppraise || appraise">
							<a-form ref="formRef" :model="formState">
								<a-row>
									<a-col :span="24">
										<a-form-item label="验收总得分" :label-col="{style: { width: '80px' }}">
											<a-rate :value="appraiseDailyScore" allow-half disabled />
										</a-form-item>
									</a-col>
									<template v-for="(item, index) in formState.appraises" :key="index">
										<a-col v-if="item.stats_code === 'APPRAISE_DAILY'" :span="24">
											<a-form-item :label="item.stats_name" :name="['appraises', index, 'stats_data']" :label-col="{style: { width: '80px' }}" :rules="{required:true, message:'请打星评分'}">
												<a-score v-model:score="item.stats_data" :min="1" :max="parseInt(item.stats_max_score)" :disabled="!appraise" />
											</a-form-item>
										</a-col>
										<template v-else-if="item.stats_code === 'APPRAISE_COMMENT'">
											<a-col v-if="appraise" :span="24">
												<a-form-item label="快捷评语" :label-col="{style: { width: '80px' }}">
													<a-select
														v-model:value="contentTemplate"
														style="width: 100%"
														:options="contentTemplateOptions"
														placeholder="内容模版"
														@change="(data) => item.stats_data = contentTemplateOptions.find((d) => d.value === data)?.label"
													></a-select>
												</a-form-item>
											</a-col>
											<a-col :span="24">
												<a-form-item :label="item.stats_name" :name="['appraises', index, 'stats_data']" :label-col="{style: { width: '80px' }}" :rules="[{required:true, message:'请输入评语内容'}]">
													<a-textarea v-model:value="item.stats_data" :auto-size="{minRows:4, maxRows:6}" allow-clear :disabled="!appraise" />
												</a-form-item>
											</a-col>
										</template>
										<a-col v-else-if="item.stats_code === 'APPRAISE_FILE_PATH'" :span="12">
											<a-form-item v-if="appraise" :label="item.stats_name" :label-col="{style: { width: '80px' }}" :name="['appraises', index, 'stats_data']">
												<a-upload v-model:score="item.stats_data" name="upload" :action="`${baseURL}/contract/upload`" :show-upload-list="true" :headers="{Authorization:`Bearer ${proxy.$cookies.get('token')}`}" :disabled="!appraise" @change="fileChangeUpload(item, $event)">
													<a-button>
														<template v-if="file_uploading">
															<loading-outlined />上传中...
														</template>
														<template v-else>
															<import-outlined />上传附件
														</template>
													</a-button>
												</a-upload>
											</a-form-item>
											<a-form-item v-else :label="item.stats_name" :label-col="{style: { width: '80px' }}" :name="['appraises', index, 'stats_data']">
												<a v-if="item.stats_data.length" :href="item.stats_data[0]?.url" target="_blank">{{ item.stats_data[0]?.name }}</a>
												<span v-else>无</span>
											</a-form-item>
										</a-col>
									</template>
								</a-row>
							</a-form>
						</div>
						<div v-else>
							暂无评价
						</div>
					</a-tab-pane>
					<a-tab-pane v-if="formState.is_weighbridge === 1" key="weighbridge_history" tab="过磅记录">
						<a-table :columns="weighbridgeColumns" :data-source="formState.weighbridgeHistorys" :pagination="false" :row-key="(record) => record.id" :scroll="{ x: 1000 }">
							<template #bodyCell="{ column, text }">
								<template v-if="column.type === 'photo'">
									<a-image v-if="!!text" :width="60" :src="text" />
								</template>
							</template>
						</a-table>
					</a-tab-pane>
				</a-tabs>
			</div>
		</div>
		<a-row :gutter="20">
			<a-col :span="24" class="py-4 text-center">
				<a-space>
					<a-button @click="closeTab(backRoute ? '/yanshou/standingBook' : '/yanshou/log')">
						<close-outlined />关闭
					</a-button>
					<a-button v-if="appraise && ((!formState.ys_settings?.length && userInfo.id === formState.yanshouLog?.opr_id) || (formState.ys_settings?.find(item => item.opr_id === userInfo.id && item.opr_type === 1)))" type="primary" @click="toAppraise">
						评价
					</a-button>
				</a-space>
			</a-col>
		</a-row>
	</div>
</template>

<script setup>
import { ref, computed, onMounted, getCurrentInstance, inject } from "vue";
import { Modal } from "ant-design-vue";
import { DeleteOutlined, SaveOutlined, CloseOutlined, PlusOutlined } from "@ant-design/icons-vue";
import { post, postJson, treeToList } from "../utils";
import { baseURL } from "../utils/request";
import { useRoute } from "vue-router";
import dayjs from "dayjs";
import { printElement } from '../utils/exportData.js';
import { userStore } from "@/store/index.js";
import { add } from "../utils/operation.js";

const store = userStore();
const userInfo = store.info;
const route = useRoute();
const backRoute = route.query.toPath;
const isPrint = JSON.parse(route.query.print || 'false');
const formState = ref({ materials: [] });
const approvedHistory = ref([]);
const formRef = ref();
const realFileList = ref([]);
const realPicList = ref([]);
const { proxy } = getCurrentInstance();
import { AScore } from "@/components/index.js";
const yslist = [
	{ value: 1, label: "钢筋" },
	{ value: 2, label: "混凝土" },
	{ value: 3, label: "周转材料" },
	{ value: 4, label: "机械" },
	{ value: 5, label: "其它" },
	{ value: 6, label: "辅助材料" }
];
const timeunitOptions = ref([]);
post("dictionary", { root_code: "MATERIAL_TIMEUNIT" }).then(data => {
	timeunitOptions.value = data;
});
const contentTemplate = ref();
const contentTemplateOptions = ref([]);
post("dictionary", { root_id: 1290 }).then(data => {
	contentTemplateOptions.value = data;
});
const appraiseStats = ref([])

const appraise = ref(route.query.appraise);

const purchaseColumns = ref([
	{
		title: "序号",
		dataIndex: "id",
		width: 60,
		align: "center"
	},
	{
		title: "物资名称",
		dataIndex: "name",
		ellipsis: true
	},
	{
		title: "型号规格",
		dataIndex: "model",
		ellipsis: true
	},
	{
		title: "单位",
		dataIndex: "unit",
		align: "center",
		customRender: ({ text, record, index, column }) => {
			let value = text;
			if (formState.value.ys_type === 2) {
				value = 'm³';
			}
			return value;
		}
	},
	{
		title: "合同",
		dataIndex: "contract_id",
		align: "center",
		customRender: ({ text, record, index, column }) => {
			return contracts.value.find((d) => d.id === text)?.name;
		}
	},
	{
		title: "采购数量",
		dataIndex: "quantity",
		align: "center",
		customRender: ({ text, record, index, column }) => {
			return text || record.fangliang;
		}
	},
	{
		title: "发货数量",
		dataIndex: "real_quantity",
		align: "center"
	},
	{
		title: "验收数量",
		dataIndex: "ys_quantity",
		align: "center"
	},
	{
		title: "品牌厂家",
		dataIndex: "brand_name",
		align: "center"
	},
	{
		title: "进场时间",
		dataIndex: "enter_time",
		align: "center",
		customRender: ({ text, record, index, column }) => {
			return dayjs(text).format("YYYY-MM-DD HH:mm:ss");
		}
	},
	{
		title: "出场时间",
		dataIndex: "exit_time",
		align: "center",
		customRender: ({ text, record, index, column }) => {
			return text ? dayjs(text).format("YYYY-MM-DD HH:mm:ss") : "";
		}
	},
	{
		title: "使用时长",
		dataIndex: "use_time",
		align: "center"
	},
	// {
	// 	title: "时长单位",
	// 	dataIndex: "time_unit",
	// 	align: "center"
	// },
	{
		title: "工号",
		dataIndex: "use_position",
		align: "center"
	},
	{
		title: "预计浇筑部位",
		dataIndex: "predict_position",
		align: "center",
		customRender: ({ text, record, index, column }) => {
			return record.expected_location;
		}
	},
	{
		title: "技术指标",
		dataIndex: "art_indexes",
		align: "center",
	},
	{
		title: "备注",
		dataIndex: "memo",
		align: "center"
	}
]);
const weighbridgeColumns = [
	{
		title: "序号",
		dataIndex: "id",
		width: 60,
		align: "center"
	},
	{
		title: "物资名称",
		dataIndex: "material",
		ellipsis: true,
		customRender: ({ text, record, index, column }) => {
			return text?.name;
		}
	},
	{
		title: "型号规格",
		dataIndex: "material",
		ellipsis: true,
		customRender: ({ text, record, index, column }) => {
			return text?.model;
		}
	},
	{
		title: "是否有效",
		dataIndex: "is_effective",
		ellipsis: true,
		customRender: ({ text, record, index, column }) => {
			return text === 1 ? '有效' : '无效';
		}
	},
	{
		title: "单位",
		dataIndex: "material",
		align: "center",
		customRender: ({ text, record, index, column }) => {
			let value = text?.unit;
			if (formState.value.ys_type === 2) {
				value = "m³";
			}
			return value;
		}
	},
	{
		title: "数量",
		dataIndex: "quantity",
		align: "center",
	},
	{
		title: "毛重照片",
		dataIndex: "gross_weight_photo",
		type: 'photo',
		align: "center",
	},
	{
		title: "皮重照片",
		dataIndex: "tare_weight_photo",
		type: 'photo',
		align: "center",
	},
	{
		title: "时间",
		dataIndex: "create_time",
		align: "center",
	},
];

// 物资信息
const purchaseOrderInfo = ref({});
const project = ref({});
const supplier = ref({});
const contracts = ref([]);

const id = computed(() => route.params.id);
const hasAppraise = ref(false);
const type = ref();
const artIndexesGongHaos = ref([]);
const activeTab = ref(appraise.value ? 'appraise' : 'ys_history')
onMounted(() => {
	post(`supplyOrder/info`, { id: id.value }).then(async data => {
		data.pic_path = JSON.parse(data.pic_path || "[]");
		data.video_path = JSON.parse(data.video_path || "[]");
		data.real_pic_path = JSON.parse(data.real_pic_path || "[]");
		for (const file of data.real_pic_path) {
			const suffix = file.url?.split(".").pop();
			if (['jpg', 'jpeg', 'png'].includes(suffix)) {
				realPicList.value.push(file)
			} else {
				realFileList.value.push(file);
			}
		}
		// 非机械和混凝土没有使用部位栏位
		if (![2].includes(data.ys_type)) {
			purchaseColumns.value = purchaseColumns.value.filter((item) => item.dataIndex !== 'use_position' && item.dataIndex !== 'predict_position' && item.dataIndex !== 'art_indexes');
		}
		contracts.value = await post("contract/all", { supplier_id: data.supplier_id, project_id: data.project_id });
		const gonghaoList = treeToList(await post("department/getTrees", { type: 4, parent_id: data.project_id }), []);
		data.materials = data.materials.map(item => {
			const { quantity, brand_name, unit, memo, use_date, use_time, time_unit, fangliang, luodu, changdu, add_time, part, real_quantity, ys_quantity, enter_time, exit_time, position, gonghao_id, expected_location, contract_id, art_indexes } = item.SupplyOrderMaterial;
			// const use_position = gonghaoList.filter((i) => {
			// 	return i.id === (position || gonghao_id)
			// })[0]
			let use_position = '';
			if (gonghao_id) {
				use_position += gonghaoList.filter((i) => {
					return i.id === gonghao_id
				})[0]?.name || ''
			}
			if (position) {
				use_position += gonghaoList.filter((i) => {
					return i.id === position
				})[0]?.name || ''
			}
			return {
				...item,
				quantity,
				brand_name,
				unit,
				memo,
				use_position,
				position,
				use_date,
				use_time,
				time_unit,
				fangliang,
				luodu,
				changdu,
				part,
				real_quantity,
				ys_quantity,
				enter_time,
				exit_time,
				add_time: dayjs(add_time).format("YYYY-MM-DD HH:mm:ss"),
				expected_location,
				contract_id,
				art_indexes: art_indexes ? JSON.parse(art_indexes) : []
			};
		});
		type.value = data.purchaseOrder.type;
		if (type.value === 'shangtong') {
			post("dictionary", { root_id: 1069 }).then((data) => {
				artIndexesGongHaos.value = data.map(d => {
					return {
						value: d.id,
						label: d.name
					};
				});
			});
		}
		const purchaseOrder = data.purchaseOrder;
		purchaseOrder.create_time = dayjs(purchaseOrder.create_time).format("YYYY-MM-DD HH:mm:ss");
		purchaseOrderInfo.value = purchaseOrder;
		project.value = data.project;
		supplier.value = data.supplier;
		data.ys_type = parseInt(data.ys_type);
		Object.assign(data, data.appraise);
		formState.value = data;
		approvedHistory.value = formState.value.ys_settings.filter((item) => item.ys_status === 2);
		// 只有周转材料 和 机械 才需要显示[出场时间, 使用时长, 时长单位]
		if (![3, 4].includes(data.ys_type)) {
			purchaseColumns.value = purchaseColumns.value.filter(item => {
				return !["exit_time", "use_time", "time_unit"].includes(item.dataIndex);
			});
		}
		if (isPrint) {
			for (const item of approvedHistory.value) {
				let activeKey = []
				activeKey = approvedHistory.value.reduce((target, item) => {
					target.push(item.pic_path);
					return target;
				}, []);
				activeKey = approvedHistory.value.reduce((target, item) => {
					target.push(item.video_path);
					return target;
				}, activeKey);
				item.activeKey = activeKey;
			}
		}
		const appraiseStatsList = await post("dictionary", { root_code: "APPRAISE_STATS" });
		appraiseStats.value = appraiseStatsList.filter(item => {
			return ['APPRAISE_DAILY', 'APPRAISE_COMMENT', 'APPRAISE_FILE_PATH'].includes(item.code)
		});
		appraiseStats.value.sort((a, b) => a.id - b.id)
		if (!formState.value.appraises.length) {
			formState.value.appraises = appraiseStats.value.map(item => {
				return {
					stats_id: item.id,
					stats_name: item.name,
					stats_code: item.code,
					stats_data: item.code === 'APPRAISE_FILE_PATH' ? [] : null,
					stats_max_score: item.memo
				}
			})
		} else {
			hasAppraise.value = true;
			appraise.value = false;
			formState.value.appraises = formState.value.appraises.map(i => {
				if (i.stats_code === 'APPRAISE_FILE_PATH') {
					i.stats_data = JSON.parse(i.stats_data);
				}
				return i;
			});
		}
	});
});
//上传前校验
const file_uploading = ref(false);
// 上传并提交文件
const fileChangeUpload = (item, { file }) => {
	if (file.status === "done") {
		item.stats_data = [{
			name: file.name,
			url: file.response.data.url
		}];
		file_uploading.value = false;
		proxy.$message.success("附件上传成功");
	}
	item.stats_data = item.stats_data.filter((item) => item.url)
};
const appraiseDailyScore = computed(() => {
	const list = formState.value.appraises?.filter(item => item.stats_code === 'APPRAISE_DAILY') || [];
	const scoreSum = add(list.map(item => item.stats_data || 0), 2);
	return scoreSum / 100 * 5;
})
const toAppraise = () => {
	formRef.value
		.validate()
		.then(() => {
			proxy.$message.destroy();
			const comment = formState.value.appraises.filter(item => item.stats_code === 'APPRAISE_COMMENT')[0].stats_data;
			if (comment.length < 20) {
				proxy.$message.error("评价内容不能少于20个字");
				return;
			}
			const params = {
				supply_order_id: formState.value.id,
				appraise_type: 1,
				supplier_id: formState.value.supplier_id,
				appraises: formState.value.appraises,
			};
			postJson("appraise/save", params)
				.then(() => {
					proxy.$message.success("评价成功", 1);
					closeTab("/yanshou/log");
				})
				.catch(err => {
					proxy.$message.error(err);
				});
		})
}

const closeTab = inject("closeTab");
</script>

<style scoped lang="scss">
.container {
  background: #fff;
  padding: 20px;

  :deep(.ant-table-cell) .ant-form-item {
    margin-bottom: 0;

    .ant-form-item-explain {
      position: absolute;
      bottom: -24px;
    }
  }
}

:deep(.ant-input[disabled]) {
  color: rgba(0, 0, 0, 0.65);
  background: #fff;
  border: 1px solid #d9d9d9;
}
:deep(.ant-input-disabled) {
  color: rgba(0, 0, 0, 0.65);
  background: #fff;
  border: 1px solid #d9d9d9;
}
//
:deep(.ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector) {
  color: rgba(0, 0, 0, 0.65);
  background: #fff;
  border: 1px solid #d9d9d9;
}
:deep(.ant-radio-disabled + span) {
  color: rgba(0, 0, 0, 0.65);
  background: #fff;
}

.gallery {
  display: flex;
  flex-wrap: wrap;

  & > div {
    margin: 0 15px 15px 0;
    overflow: hidden;
    width: 160px;

    p {
      line-height: 20px;
      height: 20px;
      overflow: hidden;
      margin: 8px 0;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
.gallery-image {
  display: inline-block;
  width: 160px;
  height: 160px;
  overflow: hidden;
  padding:0 5px;
}
:deep(.ant-descriptions-title) {
  text-align: center;
}
#yanshoulog-info-page {
  padding-top: 40px;
  position: relative;
}
</style>
